<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="选择样例数据" name="first">
        <el-row>
          <el-col :span="6" style="border:solid 1px green">
            <div v-for="(item,index) in tabList" :key="index" style="width:80%; margin:0 auto;">
              <!--change函数返回一个参数选中的 Radio label 值 label值的绑定在下面el-radio 选项框中-->
              <el-radio-group
                v-model="selectId"
                size="medium"
                text-color="#409EFF"
                @change="showExampleTable"
              >
                <!--v-model="selectId"实现的绑定：
                1：如果我们在对应的标签内设置value eg：<el-radio value=""></el-radio> 那么实现的绑定便是value的值(可能不全适合)
                2：如果我们在对应的标签内不设置value，那么实现的绑定的值便是<el-radio>和</el-radio>中间的内容-->
                <el-radio :label="item.title" border>{{ item.title }}</el-radio>
              </el-radio-group>
              <div style="height:10px" />
            </div>
          </el-col>
          <el-col :span="17">
            <el-table :data="tableDesData" border style="height: 200px">
              <el-table-column prop="name" align="center" label="数据集名称" width="150" />
              <el-table-column prop="columnCount" align="center" label="列数" width="100" />
              <el-table-column prop="rowCount" align="center" label="行数" width="100" />
              <el-table-column prop="apply" align="center" label="适用算法" width="100" />
            </el-table>
          </el-col>
        </el-row>
      </el-tab-pane>
      <!--tableContentData 是表格里面的数据 tableTitleData是列名以及与tableContentData里面的数据对应渲染的prop-->
      <el-tab-pane label="数据内容" name="second">
        <el-table
          :data="tableContentData"
          border
          style="width: 100%"
          width="100%"
        >
          <el-table-column
            v-for="(item,key) in tableTitleData"
            :key="key"
            :prop="item.value"
            :label="item.value"
          />
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="数据结构" name="third">
        <el-table
          :data="tableStructData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="columnName"
            label="名称"
            width="300"
          />
          <el-table-column
            prop="type"
            label="类型"
            width="300"
          />
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div style="float: right; margin-top: 10px; margin-bottom: 20px">
      <el-button @click="cancelMethod">取 消</el-button>
      <el-button type="primary" @click="StoreDataMethod">确 定</el-button>
    </div>
  </el-dialog>

</template>

<script>
import { fetchList } from '@/api/article'

export default {
  name: 'ExampleInputForm',
  props: [
    'dialogVisible'
  ],
  inject: ['root'],
  data() {
    return {
      formmodel:'',
      selectId: 'default ',
      selectExampleTabPosition: 'left', // 样例数据tab 显示位置
      configStatus: 'false',
      activeName: 'first',
      exampleInputStore: null, // 存储 配置信息
      InputInfo: null,
      outputInfo: {
        id: '',
        data:''
      }, // 输出信息
      tableDesData: null, // 数据集简介内容
      tableTitleData: null,
      tableContentData: null, // 数据集内容
      tableStructData: null,
      tabList: [
        {
          title: '鸢尾花数据集',
          tableDes: [{ // 注意：由于数据最终由table组件渲染，需要将数据构造成[{},{}]格式
            name: '鸢尾花数据集',
            rowCount: '4',
            columnCount: '4',
            apply: '分类'
          }],
          titleData:  [
            {
              name: '花萼长度(cm)',
              value: 'sepallength'
            }, {
              name: '花萼宽度(cm)',
              value: 'sepalwidth'
            }, {
              name: '花瓣长度(cm)',
              value: 'petallength'
            }, {
              name: '花瓣宽度(cm)',
              value: 'petalwidth'
            }, {
              name: '花的种类',
              value: 'target'
            }],
          tableData: [
            {
              sepallength: '5.1',
              sepalwidth: '3.5',
              petallength: '1.4',
              petalwidth: '0.2',
              target: 1
            }, {
              sepallength: '4.9',
              sepalwidth: '3.0',
              petallength: '1.4',
              petalwidth: '0.2',
              target: 1
            }, {
              sepallength: '4.7',
              sepalwidth: '3.2',
              petallength: '1.3',
              petalwidth: '0.2',
              target: 1
            }, {
              sepallength: '4.6',
              sepalwidth: '3.1',
              petallength: '1.5',
              petalwidth: '0.2',
              target: 1
            }],
          structData: [
            { columnName: '花萼长度', type: 'int' },
            { columnName: '花萼宽度', type: 'int' },
            { columnName: '花瓣长度', type: 'String' },
            { columnName: '花瓣宽度', type: 'String' }
          ]
        },
        {
          title: '波士顿房价数据集',
          tableDes: [{
            name: '波士顿房价数据集',
            rowCount: '4',
            columnCount: '14',
            apply: '回归'
          }],
          titleData: [
            {
              name: '城镇人均犯罪率',
              value: 'crim'
            }, {
              name: '住宅用地所占比例',
              value: 'zn'
            }, {
              name: '非商业用地所占比例',
              value: 'indus'
            }, {
              name: '查尔斯河虚拟变量',
              value: 'chas'
            }, {
              name: '环保指标',
              value: 'nox'
            }, {
              name: '房间数/每栋',
              value: 'rm'
            }, {
              name: '自住单位比例',
              value: 'age'
            }, {
              name: '距离就业中心距离',
              value: 'dis'
            }, {
              name: '距离高速便利指数',
              value: 'rad'
            }, {
              name: '不动产税率',
              value: 'tax'
            }, {
              name: '教师学生比例',
              value: 'ptratio'
            }, {
              name: '黑人比例',
              value: 'b'
            }, {
              name: '低收入阶层百分比',
              value: 'lstat'
            }, {
              name: '房价中位数',
              value: 'medv'
            }],
          tableData: [
            {
              crim: '5.1',
              zn: '3.5',
              indus: '1.4',
              chas: '0.2',
              nox: '5.1',
              rm: '3.5',
              age: '1.4',
              dis: '0.2',
              rad: '3.5',
              tax: '1.4',
              ptratio: '0.2',
              b: '3.5',
              lstat: '1.4',
              medv: '0.2'
            }, {
              crim: '5.1',
              zn: '3.5',
              indus: '1.4',
              chas: '0.2',
              nox: '5.1',
              rm: '3.5',
              age: '1.4',
              dis: '0.2',
              rad: '3.5',
              tax: '1.4',
              ptratio: '0.2',
              b: '3.5',
              lstat: '1.4',
              medv: '0.2'
            }, {
              crim: '5.1',
              zn: '3.5',
              indus: '1.4',
              chas: '0.2',
              nox: '5.1',
              rm: '3.5',
              age: '1.4',
              dis: '0.2',
              rad: '3.5',
              tax: '1.4',
              ptratio: '0.2',
              b: '3.5',
              lstat: '1.4',
              medv: '0.2'
            }, {
              crim: '5.1',
              zn: '3.5',
              indus: '1.4',
              chas: '0.2',
              nox: '5.1',
              rm: '3.5',
              age: '1.4',
              dis: '0.2',
              rad: '3.5',
              tax: '1.4',
              ptratio: '0.2',
              b: '3.5',
              lstat: '1.4',
              medv: '0.2'
            }],
          structData: [
            { columnName: 'crim', type: 'int64' },
            { columnName: 'zn', type: 'int64' },
            { columnName: 'indus', type: 'int64' },
            { columnName: 'chas', type: 'int64' },
            { columnName: 'nox', type: 'int64' },
            { columnName: 'rm', type: 'int64' },
            { columnName: 'age', type: 'int64' },
            { columnName: 'dis', type: 'int64' },
            { columnName: 'rad', type: 'int64' },
            { columnName: 'tax', type: 'int64' },
            { columnName: 'ptratio', type: 'int64' },
            { columnName: 'b', type: 'int64' },
            { columnName: 'lstat', type: 'int64' },
            { columnName: 'medv', type: 'int64' }
          ]
        }
      ],
      tabIndex: 2
    }
  },
  created() {
    const { getSelected } = this.root.propsAPI
    this.formmodel = getSelected()[0].getModel();
    var data = JSON.parse(sessionStorage.getItem(this.formmodel.id))
    if (data !== null) {
      this.selectId = data.title
      this.tableTitleData = data.titleData
      this.tableDesData = data.tableDes
      this.tableContentData = data.tableData
      this.tableStructData = data.structData
    } else {
    }
  },

  methods: {
    cancelMethod() {
      this.$emit('close-dialog')
    },
    StoreDataMethod(e) {
      this.$emit('close-dialog')// 告诉父组件要修改管理窗口可视化的变量

      const { getSelected } = this.root.propsAPI
      const item = getSelected()[0]
      const model = getSelected()[0].getModel()

      // var sessionKeys = Object.keys(sessionStorage)
      // for (var i = 0; i < sessionKeys.length; i++) { // 完成当拉过来多个相同组建的时候其存入session中的key值是不一样的
      //   var temp_str = JSON.parse(sessionStorage.getItem(sessionKeys[i]))
      //   if (sessionKeys[i].charCodeAt(0) > 255 && sessionKeys[i][0] !== '边') { // 如果key值第一个字符是汉字并且不是边
      //     if (item.id !== temp_str.id) {
      //       this.nodeNum += 1
      //     }
      //   } else {
      //   }
      // }
      if (item && item.isNode) {
        const model = item.getModel()
        console.log('model:',model)
        var keyName = model.label + model.id
        var data = JSON.parse(sessionStorage.getItem(keyName)) // 保证存入session中 同一个组件的信息在同一行
        this.outputInfo.id = item.id
        var data1 = JSON.parse(sessionStorage.getItem(this.formmodel.id))
        if(data1){//因为每次双击组件都会执行create方法，outputInfo如果不在这里同时进行赋值则默认为空 data1中的数据是选择数据集的时候就会触发的
          // 其在session中会一直存储，没有必要再单独写方法来找数据存储，直接从session中拿之前存储的数据即可
          this.outputInfo.data = data1
        }
        sessionStorage.setItem(keyName, JSON.stringify(this.outputInfo))
      } else {
        console.log('error',keyName)
      }
    },
    handleClose(done) {
      this.$emit('showchange1')
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {
        })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    // 选中数据集触发，
    showExampleTable(values) {
      const name = values + '' // 选择的数据集tab名称
      const temList = this.tabList
      var tag = false
      console.log('选择数据集名称：' + values)
      // key为索引
      for (const key in temList) {
        if (name === temList[key].title) {
          tag = true
          this.tableDesData = temList[key].tableDes
          this.tableTitleData = temList[key].titleData
          this.tableContentData = temList[key].tableData
          this.tableStructData = temList[key].structData
          sessionStorage.setItem(this.formmodel.id, JSON.stringify(temList[key]))
        }
        if(tag) {
          break
        }
      }
      if(!tag){
        console.log('未找到数据')
      }
    }
  }
}
</script>

<style>

</style>
